<template>
  <div ref="main" class="simulator_main">
    <div class="box">
      <div class="box_bg" :style="{ background: 'linear-gradient(180deg,' + ztColor + ' 0%, #F7F7F7 100%)' }">
        <!-- 信息 -->
        <div class="box_bg_info">
          <div class="box_bg_info_img">
            <img :src="txImg">
          </div>
          <div class="box_bg_info_xx">
            <div class="box_bg_info_xx_box">
              <span>会员名称</span>
              <div class="box_bg_info_xx_box_hy">普通会员</div>
            </div>
            <span class="phone">点击获取手机号</span>
          </div>
        </div>
        <!-- 订单 -->
        <div class="box_bg_content">
          <div class="box_bt">
            我的订单
            <span>全部订单></span>
          </div>
          <div class="box_bg_content_box">
            <div v-for="(item, index) in orderType" :key="index" class="box_bg_content_item">
              <div v-if="item.num" class="box_bg_content_iteM_SHOP_num">{{ item.num }}</div>
              <img :src="miniConfig.path + item.img">
              <span>{{ item.name }}</span>
            </div>
          </div>
        </div>
      </div>
      <template v-for="em in moduleList">
        <div v-if="em.code == 'M_SHOP_SHARE' && em.content.isDisplay == '1'" :key="em.id" class="share mb20">
          <div class="wCard">
            <img :src="em.venueContent.customList[0].icon" mode="widthFix">
          </div>
        </div>
        <!-- 功能菜单 -->
        <div v-if="em.code == 'M_SHOP_MYFUNCTION'" :key="em.id" class="wCard">
          <div ref="woGn" class="woGn" :class="true ? '' : 'on'">
            <div class="box_bt">{{ myConfig.name }}</div>
            <div class="box_list">
              <div v-for="item in myConfig.venueContent.customList.filter(i=>i.isSelect == '1')" :key="item.id" class="li">
                <img :src="item.icon">
                <div>{{ item.title }}</div>
              </div>
            </div>
          </div>
        </div>
      </template>

    </div>
  </div>
</template>

<script>
export default {
  props: {
    config: {
      type: Array,
      default: () => []
    },
    glaboConfig: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      orderType: [{
        name: '待付款',
        img: '/mine_ic_daifukuan.png',
        num: 3
      }, {
        name: '已支付',
        img: '/mine_ic_daifahuo.png',
        num: 21
      }, {
        name: '已取消',
        img: '/mine_ic_daishouhuo.png',
        num: 0
      }, {
        name: '退款成功',
        img: '/mine_ic_daipingjia.png',
        num: 0
      }],
      miniConfig: {},
      moduleList: [],
      activeConfig: {},
      myConfig: {
        venueContent: {
          customList: []
        }
      },

      ztColor: '#435ebe',
      txImg: require('@/icons/png/default_pic.png')
    }
  },
  watch: {
    config: {
      handler: function(newValue) {
        this.moduleList = [...this.config]
        this.InitData()
      },
      immediate: true,
      deep: true
    },
    glaboConfig: {
      handler: function(newValue) {
        this.miniConfig = newValue
        this.ztColor = newValue.color2
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    this.$bus.$on('miniMyHomeChange', (val) => {
      this.myConfig.venueContent = { ...val }
    })
  },
  methods: {
    returnTop() {
      console.log(68)
      this.$nextTick(function() {
        const scrollElem = this.$refs.main // 对应ref的命名
        const woGn = this.$refs.woGn
        scrollElem.scrollTo({ top: woGn.scrollHeight, behavior: 'smooth' })
      })
    },
    InitData() {
      this.moduleList.forEach(item => {
        if (item.code === 'M_SHOP_SHARE') {
          this.activeConfig = { ...item }
        }
        if (item.code === 'M_SHOP_MYFUNCTION') {
          this.myConfig = { ...item }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/variables.scss';

.simulator_main {
	width: 100%;
	height: 100%;
	overflow-y: auto;
	padding-bottom: 108px;

	&::-webkit-scrollbar {
		display: none;
	}
}

.box_bg {
	position: relative;
	height: 500px;
	padding-top: 200px;
	box-sizing: border-box;
  margin-bottom: 114px;
	&.wu {
		border-radius: 0;
	}
}

.box_bg_content {
	padding: 30px 0;
	box-sizing: border-box;
	width: calc(100% - 60px);
	position: absolute;
	bottom: -90px;
	left: 30px;
	right: 0;
	background: #ffffff;
	box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.08);
	border-radius: 16px;
	display: flex;
	flex-direction: column;

	.box_bg_content_box {
		display: flex;

		.box_bg_content_item {
			flex: 1;
			display: flex;
			align-items: center;
			flex-direction: column;
			position: relative;

			img {
				width: 60px;
				height: 60px;
				margin-bottom: 20px;
			}

			span {
				font-size: 24px;
				font-weight: 400;
				color: #333333;
			}

			.box_bg_content_iteM_SHOP_num {
				position: absolute;
				right: 50%;
				top: -5px;
				margin-right: -48px;
				width: 30px;
				height: 30px;
				background: $SecondColor;
				font-size: 20px;
				font-weight: 400;
				color: #ffffff;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
}

.box_bt {
	font-weight: 600;
	color: #222222;
	font-size: 32px;
	margin-bottom: 30px;
	padding: 0 30px;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;

	span {
		font-size: 26px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}
}

.box_bg_info {
	position: absolute;
	left: 0;
	color: #ffffff;
	padding: 0 30px;
	display: flex;
	box-sizing: border-box;
	align-items: center;

	.box_bg_info_img {
		width: 108px;
		height: 108px;
		overflow: hidden;
		border-radius: 50%;
		box-sizing: border-box;
		border: 5px solid #ffffff;

		img {
			width: 100%;
			height: 100%;
		}

	}

	.box_bg_info_xx {
		margin-left: 30px;
		display: flex;
		flex-direction: column;

		.phone {
			font-size: 28px;
			margin-top: 10px;
			color: #666666;
		}

		.box_bg_info_xx_box {
			display: flex;
			line-height: 42px;
			align-items: flex-end;
			margin-bottom: 15px;

			span {
				font-size: 40px;
				font-weight: 600;
				color: #222222;
			}

			.box_bg_info_xx_box_hy {
				padding: 0 15px;
				/* background: $yellow; */
				border-radius: 8px;
				display: flex;
				height: 42px;
				box-sizing: border-box;
				align-items: center;
				justify-content: center;
				font-size: 22px;
				line-height: 42px;
				font-weight: 400;
				color: #5A1900;
				margin-left: 30px;
			}
		}

		.btns {
			background: rgba(0, 0, 0, 0);
			color: rgba(255, 255, 255, 0.8);
			font-size: 24px;
			padding: 0 !important;
			margin: 0 !important;
			text-align: left;

			&::after {
				border: none;
			}
		}
	}
}

.woGn {
	background: #FFFFFF;
	border-radius: 8px;
	padding: 30px 0 0;
	margin-left: auto;
	margin-right: auto;
	width: 690px;
	box-sizing: border-box;

	&.on {
		margin-top: 120px;
	}

	.box_list {
		flex-wrap: wrap;
		display: flex;
		align-items: center;

		.li {
			width: 25%;
			margin-bottom: 50px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			font-size: 28px;
			line-height: 1;
			align-items: center;

			img {
				width: 60px;
				height: 60px;
				margin-bottom: 10px;

				&.da {
					width: 88px;
					height: 88px;
				}
			}
		}
	}
}

.wCard {
  width: 100%;
  padding: 0 30px;
  box-sizing: border-box;
}
.share {
	margin: 20 auto 22px;

	img {
		width: 100%;
		height: 138px;
	}
}
</style>
